<template>
	<component :is="modeComponent" v-if="modeComponent" />
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRootStore } from '@v/store';
import mode1Vue from './mode/mode1/index.vue';
import mode2Vue from './mode/mode2/index.vue';
import mode3Vue from './mode/mode3/index.vue';
import mode4Vue from './mode/mode4/index.vue';
import mode5Vue from './mode/mode5/index.vue';

const store = useRootStore();

const modeComponent = computed(() => {
	// 根据模式选择不同的组件
	switch (store.drawer_showComponent) {
		case 'mode1':
			return mode1Vue;
		case 'mode2':
			return mode2Vue;
		case 'mode3':
			return mode3Vue;
		case 'mode4':
			return mode4Vue;
		case 'mode5':
			return mode5Vue;
	}
});
</script>
